import React, { useState, useEffect } from 'react'
import './index.scss'

const Demo = () => {
  const items = [
    { text: 1, bgc: '#f0f' },
    { text: 2, bgc: '#00f' },
    { text: 3, bgc: '#ff0' }
  ]
  const [index, setIndex] = useState(1)
  const init = () => {
    const offsetX = 100
  }

  useEffect(() => {
    init()
  }, [])
  return (
    <div className="Demo">
      <div className="swiper">
        <div className="swiper-container">
          {items.map((item, i) => {
            const count = items.length
            const sign = Math.sign(i - index)
            let offset = (i - index) * 200
            if (i !== index) {
              offset = offset + 200 * sign
            }
            const scaleStep = 0.6
            const opacityStep = 0.5
            const scale = scaleStep ** Math.abs(i - index)
            const opacity = opacityStep ** Math.abs(i - index)
            const rotateY = i === index ? 0 : 45 * sign

            return (
              <div
                className="item"
                style={{
                  background: item.bgc,
                  transform: `translateX(${offset}px) scale(${scale}) rotateY(${rotateY}deg)`,
                  zIndex: count - Math.abs(i - index),
                  opacity: opacity
                }}
              >
                {item.text}
              </div>
            )
          })}
          <div className="pagination">
            {items.map((_, i) => {
              return (
                <span
                  className={`pagination-item ${i === index ? 'active' : ''}`}
                ></span>
              )
            })}
          </div>
        </div>
        <div>
          <div className="prev"></div>
          <div className="next"></div>
        </div>
      </div>
    </div>
  )
}

export default Demo
